<template>
	<s-table
		ref="tableRef"
		:columns="columns"
		:data="loadData"
		:row-key="(record) => record.id"
		:scroll="{ x: 'max-content' }"
		:size="5"
		:pageSizeOptions="['5', '10', '20']"
		:toolConfig="{ refresh: true }"
	>
		<template #bodyCell="{ column, text, record }">
			<template v-if="column.dataIndex === 'workTypeName'">
				<!-- 鼠标悬浮时显示 record 中的 hiddenField 字段 -->
				<a-tooltip :title="record.smsContent">
					<span>{{ text }}</span>
				</a-tooltip>
			</template>
			<template v-if="column.dataIndex === 'action'">
				<template v-if="record.isAlreadySaved === 0">
					<a-space>
						<a-button type="link" v-if="record.isAlreadySaved === 0" primary size="small" @click="toWorkDetail(record)"
							>补全
						</a-button>
					</a-space>
				</template>
				<template v-else>
					<a-space>
						<a-popconfirm title="确定要删除吗？" @confirm="deleteWork(record)">
							<a-button type="link" primary size="small" v-if="hasPerm('deleteWorkRecord')">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</template>
	</s-table>
</template>
<script setup name="loan">
	import workApi from '@/api/tjzy/work/workApi'
	import tool from '@/utils/tool'

	//======================================================================DATA======================================================================DATA======================================================================DATA
	const props = defineProps({
		debtorCardId: String,
		projectCode: String,
		isRefresh: Boolean
	})
	const emit = defineEmits({ clickWork: Object })
	const searchFormState = ref({
		current: 1,
		size: 5,
		batchNumber: props.batchNumber,
		debtorCardId: props.debtorCardId
	})
	const reminderOptions = tool.dictList('Reminder')

	const tableRef = ref()
	const columns = [
		{
			title: '拨打时间',
			dataIndex: 'createTime'
		},
		{
			title: '联系人姓名',
			dataIndex: 'liaisonName'
		},
		{
			title: '沟通对象',
			dataIndex: 'callRecipient'
		},
		{
			title: '沟通内容',
			dataIndex: 'remark'
		},
		{
			title: '沟通状态',
			dataIndex: 'workResultName'
		},
		{
			title: '结果代码',
			dataIndex: 'resultCode',
			customRender: ({ text }) => {
				return reminderOptions.find((item) => item.value === text)?.label
			}
		},
		{
			title: '是否承诺还款',
			dataIndex: 'isPromiseRepaymentName'
		},
		{
			title: '沟通方式',
			dataIndex: 'workTypeName'
		},
		{
			title: '联系人手机号',
			dataIndex: 'liaisonPhone'
		},
		{
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			align: 'center'
		}
	]
	//======================================================================METHODS======================================================================DATA======================================================================DATA

	const toWorkDetail = (row) => {
		emit('clickWork', row)
	}
	//======================================================================REQUEST======================================================================DATA======================================================================DATA
	const loadData = (parameter) => {
		searchFormState.value.current = parameter.current
		searchFormState.value.size = parameter.size
		searchFormState.value.projectCode = props.projectCode
		return workApi.workPage(searchFormState.value).then((res) => {
			return res
		})
	}
	const deleteWork = (row) => {
		let data = {
			id: row.id
		}
		workApi.deleteWork(data).then(() => {
			tableRef.value.refresh(true)
		})
	}
	//======================================================================OTHERS======================================================================DATA======================================================================DATA
	watch(
		() => props.isRefresh,
		(newValue) => {
			if (newValue) {
				tableRef.value.refresh(true)
			}
		}
	)
</script>
